<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>保卫特拉维夫 - Defend Tel Aviv</title>
    <link rel="stylesheet" href="src/styles/main.css">
</head>
<body>
    <div id="gameContainer">
        <div id="topInfoBar">
            <div class="info-item">
                <span class="icon">💰</span>
                <span id="money">500000</span>
            </div>
            <div class="info-item">
                <span class="icon">📊</span>
                <span>拦截率: </span><span id="interceptRate">0%</span>
            </div>
            <div class="info-item">
                <span class="icon">⏰</span>
                <span>波次: </span><span id="waveInfo">1/10</span>
            </div>
            <div class="info-item">
                <span class="icon">🎯</span>
                <span>政府大楼: </span><span id="buildingHealth">100%</span>
            </div>
            <div class="info-item">
                <span class="icon">⚠️</span>
                <span>威胁等级: </span><span id="threatLevel">低</span>
            </div>
        </div>
        
        <div id="gameArea">
            <canvas id="gameCanvas" width="1200" height="740"></canvas>
            
            <!-- 游戏区域覆盖层，用于处理点击事件 -->
            <div id="gameOverlay">
                <div id="iranLaunchArea" class="game-zone"></div>
                <div id="seaArea" class="game-zone"></div>
                <div id="defenseArea" class="game-zone">
                    <!-- 防御网格将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
        
        <div id="weaponSelectionMenu">
            <button class="weapon-btn" data-weapon="iron-dome">
                <img src="/svg/weapons/israeli/iron-dome.svg" alt="铁穹系统">
                <span>铁穹系统</span>
                <span class="cost">500K</span>
            </button>
            <button class="weapon-btn" data-weapon="arrow-3">
                <img src="/svg/weapons/israeli/arrow-3.svg" alt="箭-3系统">
                <span>箭-3系统</span>
                <span class="cost">2000K</span>
            </button>
            <button class="weapon-btn" data-weapon="green-pine-radar">
                <img src="/svg/weapons/israeli/green-pine-radar.svg" alt="绿松雷达">
                <span>绿松雷达</span>
                <span class="cost">800K</span>
            </button>
        </div>
        
        <!-- 游戏状态指示器 -->
        <div id="gameStatus" class="game-status">
            <h4>🎯 游戏状态</h4>
            <div class="status-item">
                <span>活跃导弹:</span>
                <span class="status-value" id="activeMissiles">0</span>
            </div>
            <div class="status-item">
                <span>防御系统:</span>
                <span class="status-value" id="defenseSystems">0</span>
            </div>
            <div class="status-item">
                <span>当前波次:</span>
                <span class="status-value" id="currentWave">0</span>
            </div>
            <div class="status-item">
                <span>游戏状态:</span>
                <span class="status-value" id="gameState">准备中</span>
            </div>
        </div>
    </div>
    
    <!-- 加载模块 -->
    <script type="module" src="src/main.ts"></script>
</body>
</html>
